// 详情展示界面的列
.column-wrap {
  @basicWidth: 360px;
  @global-tips-color: #999;
  .clearfix();
  width: 100%;
  font-size: 14px;
  & + .column-wrap {
    margin-top: 4px;
  }

  &.column-in-detail {
    &.nofloat-item {
      float: none;
      overflow: hidden;
    }
    line-height: 40px;

    .column-prefix {
      float: left;
      width: 5 * 14px;
      color: @global-tips-color;
      margin-right: 15px;
      text-align: right;
    }

    .column-content {
      color: #222222;
      overflow: hidden;
      display: block;
      word-break: break-all;
      white-space: pre-wrap;
      .column-content-text {
        overflow: auto;
        text-overflow: clip;
        white-space: normal;
        max-height: 120px;
      }
      .no-data {
        color: @global-tips-color;
      }
    }

    // 重置被覆盖的属性
    .column-prefix,
    .column-content {
      height: auto;
      line-height: 20px;
    }
  }

  &.column-normal-label {
    .column-prefix {
      color: #333;
    }
  }

  &.column-in-edit {
    float: left;
    margin-bottom: 0px;

    .column-prefix {
      float: left;
      width: 5 * 14px;
      color: #333;
      margin-right: 14px;
      text-align: right;
    }
  }

  &.inline {
    width: auto;
    min-width: auto;

    &:not(:first-child) {
      .column-prefix {
        width: auto;
      }
    }
  }

  &.label-left {
    .column-prefix {
      text-align: left;
    }
  }
}

@textlength-2: 2 * 14px;
@textlength-3: 3 * 14px;
@textlength-4: 4 * 14px;
@textlength-5: 5 * 14px;
@textlength-6: 6 * 14px;
@textlength-7: 7 * 14px;
@textlength-8: 8 * 14px;
@textlength-9: 9 * 14px;
@textlength-10: 10 * 14px;
@textlength-11: 11 * 14px;

.label-long-2 {
  .column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-2;
  }

  .column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-2;
  }

  &.column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-2;
  }

  &.column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-2;
  }
}

.label-long-3 {
  &.column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-3;
  }

  &.column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-3;
  }
}

.label-long-4 {
  .column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-4;
  }

  .column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-4;
  }

  &.column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-4;
  }

  &.column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-4;
  }
}

.label-long-5 {
  .column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-5;
  }

  .column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-5;
  }

  &.column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-5;
  }

  &.column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-5;
  }
}

.label-long-6 {
  .column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-6;
  }

  .column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-6;
  }

  &.column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-6;
  }

  &.column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-6;
  }
}

.label-long-7 {
  .column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-7;
  }

  .column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-7;
  }

  &.column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-7;
  }

  &.column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-7;
  }
}

.label-long-8 {
  .column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-8;
  }

  .column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-8;
  }

  &.column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-8;
  }

  &.column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-8;
  }
}

.label-long-10 {
  .column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-10;
  }

  .column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-10;
  }

  &.column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-10;
  }

  &.column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-10;
  }
}

.label-long-11 {
  .column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-11;
  }

  .column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-11;
  }

  &.column-wrap.column-in-detail .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-11;
  }

  &.column-wrap.column-in-edit .column-prefix {
    // 根据文字长度定prefix的长度
    width: @textlength-11;
  }
}
